<script setup lang='ts'>
import { nextTick, reactive, ref } from 'vue';
import { systemQuickQueryApi as systemApi } from '@/api/controller';
import { ToastSuccess, Toastloading } from '@/utils/public';
import magnForm from './magnForm.vue';
const formLabelWidth = '120px'
const dataForm = ref()
const magnFormRef = ref()
const $emit = defineEmits(['updateList'])
const action = reactive({
  list: "",
  total: 0
})
interface formQuert {
  uuid: string
  game_id: string
  game_level: string
  gift_price: string
  txt: string
}
let form = reactive({
  uuid: '',
  game_id: '',
  game_level: '',
  gift_price: '',
  txt: '',
} as formQuert)
const formRules = {
  uuid: [{ required: true, message: "请输入 用户UUID", trigger: "blur" }],
  game_id: [{ required: true, message: "请选择 游戏", trigger: "blur" }],
  // game_level: [{ required: true, message: "请选择 gamelevel", trigger: "blur" }],
  // gift_price: [{ required: true, message: "请输入 gift_price", trigger: "blur" }],
}

const hitValue = (value: any) => {
  if (form.txt.trim() !== '' && !isNaN(Number(form.txt.trim())) && !isNaN(Number(String(value).trim())) && !isNaN(Number(form.txt.trim()))) {
    if (Number(String(value).trim()) > Number(form.txt.trim())) {
      return true;
    }
  }
  return false;
}


const handleSubmit = () => {
  dataForm.value.validate(async (valid: any) => {
    if (!valid) return
    const loading = Toastloading()
    const res = await systemApi.getQuickQuery(form)
    let { list = [], total = 0 } = res.data

    let listTxt = "";
    for (let i = 0; i < list.length; i++) {
      if (typeof list[i] === 'object') {
        let lastTwo = Object.values(list[i]).slice(-2);
        if (hitValue(lastTwo[0]) || hitValue(lastTwo[1])) {
          listTxt += "<span class='red'>" + lastTwo.join('-') + "</span>"
        }
        else{
          listTxt += lastTwo.join('-')
        }
        listTxt += `, `
      } else {
        if (hitValue(list[i].trim())) {
          listTxt += `<span class='red'>${list[i]}</span>, `
        }
        else {
          listTxt += `${list[i]}, `
        }
      }
    }
    action.list = listTxt
    action.total = total
    loading.close()
  })
}

const handleMagn = (row: any = {}) => {
  magnFormRef.value.openDialog(row)
}

</script>

<template>
  <div>
    <div class="xm-form" style="padding: 20px">
      <el-form ref="dataForm" :model="form" :rules="formRules">
        <div style="display: flex; align-items: start; margin-bottom: 15px">
          <label style="width: 60px">uuid:</label>
          <el-form-item prop="uuid">
            <el-input v-model="form.uuid" placeholder="请输入用户UUID" style="width: 150px; margin-right: 20px" />
          </el-form-item>
          <label style="width: 60px">gameid:</label>
          <el-form-item prop="game_id">
            <el-select v-model="form.game_id" placeholder="请选择游戏" style="width: 150px; margin-right: 20px">
              <el-option label="小盘" value="1" />
              <el-option label="大盘" value="2" />
              <el-option label="擂主活动" value="3" />
              <el-option label="幸运礼物" value="4" />
              <el-option label="五连绝世" value="5" />
            </el-select>
          </el-form-item>
          <label style="width: 80px">gamelevel:</label>
          <el-form-item prop="game_level">
            <el-select v-model="form.game_level" placeholder="请选择礼物等级" style="width: 150px">
              <el-option label="普通池" value="1000" />
              <el-option label="隐藏池" value="1001" />
            </el-select>
          </el-form-item>
          <label style="width: 80px">查询内容:</label>
          <el-form-item prop="txt">
            <el-input v-model="form.txt" placeholder="请输入查询内容" style="width: 150px; margin-right: 20px" />
          </el-form-item>
        </div>
        <div style="display: flex; align-items: start">
          <label style="width: 80px">gift price:</label>
          <el-form-item prop="gift_price">
            <el-select v-model="form.gift_price" placeholder="请选择礼物价格" style="width: 150px; margin-right: 20px">
              <el-option label="100" value="100" />
              <el-option label="200" value="200" />
              <el-option label="500" value="500" />
              <el-option label="1000" value="1000" />
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="handleSubmit" style="width: 80px">查询</el-button>
          <el-button type="primary" @click="handleMagn" style="width: 80px">倍率入口</el-button>
        </div>
      </el-form>
    </div>
    <div style="padding: 20px" v-html="action.list"></div>
    <magnForm ref="magnFormRef" />
  </div>
</template>
<style>
.red {
  color: red;
}
</style>
